<template>
  <div class="qq-loading-container" :style="{width: size+'px',height: size+'px'}">
    <div class="bg-color"></div>
  </div>
</template>

<script>
export default {
  name: "QQLoading",
  props: {
    size: {
      type: Number,
      default: 50
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
.qq-loading-container{
  position: relative;
  border-radius: 50%;
  transform: rotate(90deg);
  animation: loading 3s linear infinite;
  .bg-color{
    .self-fill();
    filter: blur(1px);
    background: conic-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5),rgba(0, 0, 255, 0.5));
    border-radius: 50%;
    &::before{
      content: "";
      width: 99%;
      height: 99%;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      clip-path: circle(100px at center);
      background: #ffffff;
    }
    &::after{
      content: "";
      width: 70%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-30%, -50%) perspective(.3em) rotateY(-2deg);
      z-index: -1;
      position: absolute;
      filter: blur(20px);
      background: rgba(255, 0, 0, 0.5);
      animation: color 3s linear infinite;
    }
    @keyframes loading {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes color {
      0% {
        background: rgba(255, 0, 0, 0.5);
      }
      25% {
        background: rgba(0, 255, 0, 0.5);
      }
      50% {
        background: rgba(0, 0, 255, 0.5);
      }
      75% {
        background: rgba(255, 255, 0, 0.5);
      }
      100% {
        background: rgba(255, 0, 0, 0.5);
      }
    }
  }
}
</style>
